<template>

    <div id="orgMan" class="w-h-100">
        <el-row :gutter="2" class="w-h-100">
            <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="4">
                <div class="tree-s" style="padding: 6px 0;">
                    <el-card shadow="hover" class="h-sty" :body-style="{ paddingLeft: '0', paddingRight:'0' }">
                        <el-tree 
                            :data="treeData" 
                            :highlight-current="true" 
                            :default-expand-all="true" 
                            :expand-on-click-node="false" 
                            :props="defaultProps" 
                            @node-click="handleNodeClick"
                        >
                        </el-tree>
                    </el-card>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="20">
                <div class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box;overflow:hidden;">
                    <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px;">
                        <div style="box-sizing: border-box;">
                            <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
                                <el-form class="box-f" ref="queryForm" :inline="true">
                                    <el-form-item :label="$t('key_134')">
                                        <el-input style="width:120px;" v-model="searchOne" :placeholder="$t('key_135')" clearable  />
                                    </el-form-item>
                                    <el-form-item style="margin-right: 0">
                                        <el-button @click="resetClick" icon="ele-Refresh"> {{ $t('key_14') }} </el-button>
                                        <el-button @click="searchClick" type="primary" icon="ele-Search"> {{ $t('key_15') }} </el-button>
                                        <el-button type="primary" @click="nodeClick('')" icon="ele-Plus"> {{ $t('xinZeng') }} </el-button>
                                    </el-form-item>
                                </el-form>
                            </el-card>
                        </div>

                        <div style="box-sizing: border-box;margin-top: 8px;" class="flex-1 pos-r">
                            <div class="pos-a w-h-100" style="box-sizing: border-box;">
                                <el-card class="box-card w-h-100" shadow="hover" style="">
                                    <div style="" class="w-h-100 ver-flex">
                                        <div class="flex-1 pos-r">
                                            <div class="pos-a w-h-100">
                                                <el-table :data="list" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                                                    <el-table-column type="index" :label="$t('key_4')" width="55" align="center" :index="indexMethod" />
                                                    <el-table-column prop="name" :label="$t('key_136')"  align="center" />
                                                    <el-table-column prop="code" :label="$t('key_2')" align="center" />
                                                    <el-table-column prop="active" :label="$t('key_7')" align="center" />
                                                    <el-table-column :label="$t('caoZuo')" align="center" width="200" >
                                                        <template #default="scope">
                                                            <el-button  @click="nodeClick(scope.row)" class="icon-e" icon="ele-Edit" size="small" text type="primary"> {{ $t('key_8') }} </el-button>
                                                            <el-popconfirm
                                                                confirm-button-text="确认"
                                                                cancel-button-text="取消"
                                                                icon="InfoFilled"
                                                                icon-color="#626AEF"
                                                                :title="$t('key_9')"
                                                                @confirm="deleteHandle(scope.row.id , getData)"
                                                            >
                                                                <template #reference>
                                                                    <el-button icon="ele-Delete" size="small" text type="danger"> {{ $t('key_10') }} </el-button>
                                                                </template>
                                                            </el-popconfirm>
                                                        </template>
                                                    </el-table-column>
                                                </el-table>
                                            </div>
                                        </div>
                                        <div style="height: 30px;margin-top: 20px;" class="hr-flex-start">
                                            <el-pagination
                                                v-model:currentPage="pageNo"
                                                v-model:page-size="pageSize"
                                                :total="totalRows"
                                                :page-sizes="[10, 20, 50, 100]"
                                                small
                                                background
                                                @size-change="handleSizeChange"
                                                @current-change="handleCurrentChange"
                                                layout="total, sizes, prev, pager, next, jumper"
                                                class="w-h-100"
                                            />
                                        </div>
                                    </div>
                                </el-card>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <add-edit-orgMan
            :repairInfo="repairInfo"
            :isUseDialog="isUseDialog"
            @updateData="getData"
            @cancelUseClick="cancelUseClick"
            @controlUseClick="controlUseClick"
        />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , onMounted , toRaw , getCurrentInstance, toRefs, ComponentInternalInstance } from 'vue'
import { getOrgPage , sysOrgDelete , getOrgTree } from '/@/api/manage/manage.ts'
import AddEditOrgMan from './component/add-edit-orgMan.vue'
import getTableData from '/@/utils/getTableData'
import { ElRow, ElCol, ElCard, ElTree, ElForm, ElFormItem, ElMessageBox , ElInput, ElSelect, ElOption, ElButton, ElTable, ElTableColumn, ElPopconfirm, ElDropdown, ElDropdownMenu, ElDropdownItem, ElPagination } from 'element-plus'
import { list } from 'postcss'
/*** 定义接口基础数据类型 */
interface data {
    repairInfo ? :string,
    treeData: any[]
}
export default defineComponent( {
    name: 'orgMan',
    components: {
        AddEditOrgMan
    },
    setup(){
        const isUseDialog = ref() // 新增/编辑弹出框隐藏/显示
        /*** 引用接口定义基础数据初始值 */
        const state = reactive < data > ({
            repairInfo: '',
            treeData: []
        })
        const searchOne = ref()
        const searchObj = reactive({
            name : '',
        })

        /*** searchClick 查询按钮 */
        const searchClick = () => {
            if(searchOne.value !== undefined){
                searchObj.name = searchOne.value
            }
        }

        /*** resetClick 重置按钮 */
        const resetClick = () => {
            searchObj.name = ''
            searchOne.value = ''
            Object.assign(searchObj,{pid: ''})
            treeDataFun()
        }

        const defaultProps: object = {
            children: 'children',
            label: 'title',
        }

        const treeDataFun = async () => {
            try {
                let res: { data: any[] } = await getOrgTree()
                state.treeData = res.data
            } catch (err) {}
        }

        /*** nodeClick 新增/修改点击事件 */
        const nodeClick = (val:string | object) => {
            if(val !== ''){
                state.repairInfo = JSON.stringify(val)
            }else{
                state.repairInfo = ''
            }
            isUseDialog.value = true
        }

        /*** deleteHandle 删除按钮点击事件 */
        const deleteHandle = async (val: number | string , updateFun: Function) => {
            let param = {id : val}
            try {
                let res = await sysOrgDelete(param)
                if(res.success){
                    updateFun()
                }
            } catch (err) { return }
        }

        /*** handleNodeClick 树型当前节点点击事件 */
        const handleNodeClick = (data: any , node: any , obj: any) => {
            const setNode = toRaw(node)
            // console.log(setNode.data,'node')
            Object.assign(searchObj,{pid: setNode.data.id})
        }

        /*** cancelUseClick 新增/编辑取消事件 */
        const cancelUseClick = () => {
            isUseDialog.value = false
        }

        /*** controlUseClick 新增/编辑提交事件 */
        const controlUseClick = (val: String) => {
            if (val === 'success') {
                treeDataFun()
            }
            isUseDialog.value = false
        }

        /*** onMounted 数据加载 */
        onMounted(() => {
            treeDataFun()
        })

        return {
            defaultProps,
            ...getTableData(getOrgPage,{},searchObj),
            deleteHandle,
            handleNodeClick,
            isUseDialog,
            cancelUseClick,
            controlUseClick,
            ...toRefs(state),
            nodeClick,
            searchOne,
            resetClick,
            searchClick,
        }
    },
} )
</script>
<style scoped lang="scss">
    #orgMan {
        :deep(.el-card__body) {
            height: 100%;
        }
        .box-f{
            :deep(.el-form-item__label){
                // padding: 0;
            }
        }
        ul {

            list-style: none;

            li {
                cursor: pointer;

                &:hover {
                    color: red;
                }
            }
        }
        .tree-s{
            height: calc(100vh - 157px);
            overflow-y: auto;
        }
        .h-sty{
            height: 100%;
            overflow: auto;
        }
        .icon-e{
            :deep(.el-icon){
                margin-right: 0px!important;
            }
        }
    }
</style>